<template>
  <div class="container">
    <h1>学生成绩复核</h1>

    <!-- 文件上传 -->
    <div class="upload-section">
      <h2>文件上传</h2>
      <el-upload
          action="/data-compare/upload-file"
          :on-success="handleUploadSuccess"
          :on-error="handleUploadError"
          :before-upload="beforeUpload"
          :data="{ fileType: fileType }"
          :on-remove="handleFileRemove"
          :file-list="fileList"
      >
        <el-button type="primary">点击上传</el-button>
      </el-upload>
      <el-select v-model="fileType" placeholder="请选择文件类型">
        <el-option label="TXT" value="TXT"></el-option>
        <el-option label="EXCEL" value="EXCEL"></el-option>
      </el-select>
    </div>

    <!-- 成绩复核 -->
    <div class="score-review-section">
      <h2>成绩复核</h2>
      <el-button type="primary" @click="addFieldMapping">新增对比字段</el-button>

      <!-- 字段映射列表 -->
      <div v-for="(field, index) in fieldMappingEntityList" :key="index" class="field-mapping-item">
        <el-select v-model="field.excelColumnIndex" placeholder="请选择Excel列">
          <el-option
              v-for="col in columns"
              :key="col.value"
              :label="col.label"
              :value="col.value"
          ></el-option>
        </el-select>

        <el-select v-model="field.jsonFeildNameEnum" placeholder="请选择字段">
          <el-option
              v-for="fieldOption in fields"
              :key="fieldOption.value"
              :label="fieldOption.label"
              :value="fieldOption.value"
          ></el-option>
        </el-select>

        <el-button type="danger" @click="removeFieldMapping(index)">删除</el-button>
      </div>

      <!-- Sheet名称输入框 -->
      <el-input v-model="sheetName" placeholder="请输入Sheet名称" class="sheet-input"></el-input>

      <!-- 提交按钮 -->
      <el-button type="success" @click="submitScoreReview">提交成绩复核</el-button>
    </div>

    <!-- 结果显示 -->
    <div class="result-section">
      <h2>复核结果</h2>
      <el-input
          type="textarea"
          :rows="10"
          v-model="resultMessage"
          readonly
          placeholder="复核结果将显示在这里"
      ></el-input>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      fileType: '', // 文件类型
      fileList: [], // 已上传的文件列表
      fieldMappingEntityList: [], // 字段映射列表
      sheetName: '', // Sheet名称
      resultMessage: '', // 复核结果消息
      columns: [
        { label: 'A', value: 0 },
        { label: 'B', value: 1 },
        { label: 'C', value: 2 },
        { label: 'D', value: 3 },
        { label: 'E', value: 4 },
        { label: 'F', value: 5 },
        { label: 'G', value: 6 },
        { label: 'H', value: 7 },
        { label: 'I', value: 8 },
        { label: 'J', value: 9 },
        { label: 'K', value: 10 },
        { label: 'L', value: 11 },
        { label: 'M', value: 12 },
        { label: 'N', value: 13 },
      ],
      fields: [
        { label: '学号', value: 'STUDENT_NUMBER' },
        { label: '学生姓名', value: 'NAME' },
        { label: '平时成绩', value: 'DAILY_SCORE' },
        { label: '期末成绩', value: 'EXAM_SCORE' },
        { label: '最终成绩', value: 'FINAL_SCORE' },
      ],
    };
  },
  methods: {
    // 文件上传成功回调
    handleUploadSuccess(response, file) {
      this.fileList.push(file);
      this.$message.success('文件上传成功');
    },
    // 文件上传失败回调
    // eslint-disable-next-line
    handleUploadError(err, file) {
      this.$message.error('文件上传失败');
    },
    // 文件上传前的校验
    // eslint-disable-next-line
    beforeUpload(file) {
      if (!this.fileType) {
        this.$message.warning('请先选择文件类型');
        return false;
      }
      return true;
    },
    // 文件删除
    async handleFileRemove(file) {
      try {
        await axios.delete('/data-compare/delete-file', {
          params: { fileName: file.name },
        });
        this.fileList = this.fileList.filter((f) => f.name !== file.name);
        this.$message.success('文件删除成功');
      } catch (error) {
        this.$message.error('文件删除失败');
      }
    },
    // 新增字段映射
    addFieldMapping() {
      this.fieldMappingEntityList.push({
        excelColumnIndex: null,
        jsonFeildNameEnum: null,
      });
    },
    // 删除字段映射
    removeFieldMapping(index) {
      this.fieldMappingEntityList.splice(index, 1);
    },
    // 提交成绩复核
    async submitScoreReview() {
      if (!this.sheetName) {
        this.$message.warning('请输入Sheet名称');
        return;
      }

      const payload = {
        fieldMappingEntityList: this.fieldMappingEntityList,
        sheetName: this.sheetName,
      };

      try {
        const response = await axios.post('/data-compare/score-review', payload);
        // 将List<String>类型的结果转换为字符串显示
        this.resultMessage = response.data.join('\n');
        this.$message.success('成绩复核提交成功');
      } catch (error) {
        this.resultMessage = '成绩复核提交失败：' + error.message;
        this.$message.error('成绩复核提交失败');
      }
    },
  },
};
</script>

<style scoped>
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.upload-section,
.score-review-section,
.result-section {
  margin-bottom: 30px;
}

.field-mapping-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.field-mapping-item .el-select {
  margin-right: 10px;
}

.sheet-input {
  margin-top: 20px;
  margin-bottom: 20px;
}

.result-section .el-textarea {
  margin-top: 10px;
}
</style>